<template>
    <body>
        <van-nav-bar title="充值" left-arrow @click-left="onBack" />

        <form class="mui-input-group" method="post">
            <div class="mui-input-row" style="display:flex;">
                <!-- 可以使用 CellGroup 作为容器 -->
                <van-cell-group inset>
                    <van-field v-model="state.mobile" label="充值账户" placeholder="请输入要充值的手机号" />
                </van-cell-group>
            </div>

            <!--充值金额-->
            <div class="money_box">
                <h1>选择充值金额</h1>
                <div>
                    <div class="money" :class="{ choose: state.rechargemoney == 500 }" @click="choose(500)">500</div>
                    <div class="money" :class="{ choose: state.rechargemoney == 100 }" @click="choose(100)">100</div>
                    <div class="money" :class="{ choose: state.rechargemoney == 200 }" @click="choose(200)">200</div>
                    <input class="other" type="number" ref="other" placeholder="其他" @change="otherChoose">
                </div>

            </div>
            <input type="hidden" name="money" id="money">
            <!--立即充值-->
            <van-button type="primary" size="large" @click="recharge">立即充值</van-button>
        </form>
    </body>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref,reactive } from 'vue'
import apiList from '@/api'
import { useUserStore } from '@/store/user.js'
import resJudge from '@/hooks/res.js'
import { showToast } from 'vant'

const userStore = useUserStore()
const router = useRouter()
const state = reactive({
    rechargemoney: 0,
    mobile: userStore.userInfo.mobile,
})
let other = ref(null)

function onBack() {
    router.go(-1);
}
function otherChoose(){
    state.rechargemoney = other.value.value
}
function choose(money) {
    state.rechargemoney = parseInt(money);
}
//充值
async function recharge() {
    if (isNaN(state.rechargemoney)) {
        showToast({
            message: '不是数字',
        })
        return
    }
    let result = await apiList.onRecharge({ 'mobile': state.mobile, 'busid': userStore.userInfo.id, 'money': state.rechargemoney });
    if (resJudge(result)) {
        router.push('/business/base/index')
    }
}
</script>

<style>
@import url('/assets/css/recharge.css');
</style>